<template>
  <div class="login-container">
    <div class="card shadow-sm">
      <div class="card-body">
        <div class="text-center mb-4">
          <i class="bi bi-person-circle fs-1 text-primary"></i>
          <h2 class="mt-2">用户登录</h2>
          <p class="text-muted">请输入您的账号信息</p>
        </div>

        <form @submit.prevent="handleLogin">
          <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <div class="input-group">
              <span class="input-group-text"><i class="bi bi-person"></i></span>
              <input
                  type="text"
                  class="form-control"
                  id="username"
                  v-model="form.username"
                  placeholder="请输入用户名"
                  required
              >
            </div>
          </div>

          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <div class="input-group">
              <span class="input-group-text"><i class="bi bi-lock"></i></span>
              <input
                  type="password"
                  class="form-control"
                  id="password"
                  v-model="form.password"
                  placeholder="请输入密码"
                  required
              >
            </div>
          </div>

          <div v-if="errorMessage" class="alert alert-danger">
            <i class="bi bi-exclamation-circle me-2"></i>{{ errorMessage }}
          </div>

          <div class="d-grid mb-3">
            <button
                type="submit"
                class="btn btn-primary btn-lg"
                :disabled="isLoading"
            >
              <template v-if="isLoading">
                <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                登录中...
              </template>
              <template v-else>
                <i class="bi bi-box-arrow-in-right me-2"></i>登录
              </template>
            </button>
          </div>

          <div class="text-center">
            <p class="mb-0">
              没有账号? <router-link to="/register">立即注册</router-link>
            </p>
            <router-link to="/forgot-password" class="small">忘记密码?</router-link>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userApi } from '@/api'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const form = ref({
      username: '',
      password: ''
    })
    const errorMessage = ref('')
    const isLoading = ref(false)

    const handleLogin = async () => {
      errorMessage.value = ''
      isLoading.value = true

      try {
        const response = await userApi.login(form.value)

        // 保存用户信息 - 移除 token 相关逻辑
        localStorage.setItem('username', response.username)
        localStorage.setItem('userId', response.id)
        localStorage.setItem('role', response.role)

        // 检查重定向路径
        const redirect = route.query.redirect || '/'

        // 根据角色重定向
        let targetPath = redirect
        if (redirect === '/') {
          if (response.role === 'ADMIN') {
            targetPath = '/admin/products'
          } else if (response.role === 'SELLER') {
            targetPath = '/seller/orders'
          } else {
            targetPath = '/products'
          }
        }

        // 添加登录成功提示
        router.push({
          path: targetPath,
          query: { loginSuccess: true }
        })

      } catch (error) {
        console.error('登录失败:', error)
        // 根据错误类型显示不同消息
        if (error.response?.status === 401) {
          errorMessage.value = '用户名或密码错误'
        } else {
          errorMessage.value = '登录失败，请稍后再试'
        }
      } finally {
        isLoading.value = false
      }
    }

    return {
      form,
      errorMessage,
      isLoading,
      handleLogin
    }
  }
}
</script>

<style scoped>
.login-container {
  max-width: 450px;
  margin: 80px auto;
  padding: 0 15px;
}

.card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.card-body {
  padding: 30px;
}

.input-group-text {
  background-color: #f8f9fa;
  border-right: 0;
}

.form-control:focus {
  box-shadow: none;
  border-color: #86b7fe;
}

.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  transition: all 0.3s;
}

.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  transform: translateY(-2px);
}

.btn-primary:disabled {
  background-color: #86b7fe;
  border-color: #86b7fe;
}

a {
  color: #0d6efd;
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: #0b5ed7;
  text-decoration: underline;
}
</style>